<template>
  <div class="menu-container">
      <RouterLink  :exact="item.exact" v-for="item in items" :key="item.link"  :to="{name:item.name}"  active-class="select" exact-active-class=""
      >
          <div class="icon">
              <Icon :type="item.ic"></Icon>
          </div>
          <div class="text">
              <p>{{item.txt}}</p>
          </div>
      </RouterLink>
  </div>
</template>

<script>
import Icon from '../../Icon';
export default {
    data(){
        return{
    items:[
        {
            name:"Home",
            txt:"首页",
            ic:"home",
            exact:true,
        }, 
         {
            name:"Blog",
            txt:"文章",
            ic:"blog",
            exact:false,
        },
          {
            name:"About",
            txt:"关于我",
            ic:"about",
            exact:true,
        },
          {
            name:"Project",
            txt:"项目&效果",
            ic:"code",
            exact:true,
        },
          {
            name:"Message",
            txt:"留言板",
            ic:"chat",
            exact:true,
        },
    ]
        }
    },
    components: { Icon },
    // methods:{
    //     isSelect(item){ 
    //     const link=item.link.toLowerCase();
    //     const curPathname = location.pathname.toLowerCase();
    //    if(item.startSelect){
    //      return  curPathname.startsWith(link);
    //    }else{
    //        return curPathname===link; 
    //    }

    //     }
    // }
    
}
</script>

<style lang="less" scoped> 
.menu-container{
    width: 100%;
    color: #8c8c8c;
    
    a{
        height: 40px;
        padding: 5px 30px;
        display: flex;
        align-items: center;
        &:hover{
            color:#FFF;
            background: #2d2d2d;
        }
        .icon{
            margin: 0 10px;
        }
         &.select{
        color:#FFF;
            background: #2d2d2d;
    }
    }
   
}
</style>